import React from 'react';
import {inject, observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Tools } from 'weaver-mobile';
import { ListViewPage } from 'weaver-mobile-page';
import { renderLoading, getTemplateBasicItemToHtml, getTemplateLinkItem, getTemplateBasicItem } from '../../public';
import BackTop from '../../../public/back-to-top';
const getLabel = Tools.getLabel;

/* 个人中心 -> 我的评论 */
@withRouter
@inject('centerStore')
@observer
export default class MyComment extends React.Component {
  static defaultProps = {
    prefixCls: 'cowork-center-myPublish-myComment',
  }

  constructor(props) {
    super(props);
    this.state = {
      path: props.location.pathname + '/detail/',
      coworkId: '',
    }
  }
  
  componentDidMount() {
    const { centerStore: { publishStore } } = this.props;
    const { getMyCommentList } = publishStore;
    getMyCommentList();
  }

  componentWillUnmount() {
    const { centerStore: { publishStore } } = this.props;
    const {  doMyCommentDeleteMount  } = publishStore;
    doMyCommentDeleteMount();
  }

  toDetailPage = (e, id, path) => {
    e.stopPropagation();
    this.setState({coworkId: id});
    this.props.history.push(path);
  }

  getTemplateLinkItem = (curCls, title, name, id, path) => ( // todo: a链接点击事件
    <div className={`${curCls}-item`}>
      <div className={`${curCls}-item-left`}>{title}:</div>
      <div className={`${curCls}-item-right`}>
        <a onClick={(e) => this.toDetailPage(e, id, path)}>{name}</a>
      </div>
    </div>
  )
  
  getTemplate = (template) => {
    const newTemp = {
      default: [{
        key: 'col_1',
        render: (data) => {
          const curCls = "cowork-template-list";
          return (
            <div className={curCls} key={data.id}>
              {getTemplateBasicItemToHtml(curCls, getLabel(82562,'评论内容'), data.remarkspan)}
              {getTemplateLinkItem(curCls, getLabel(83258,'相关主题'), data.coworknamespan, data.coworkid)}
              {getTemplateBasicItem(curCls, getLabel(83209, '版块'), data.typenamespan)}
              {this.getTemplateLinkItem(curCls, getLabel(27519,'楼号'), `${data.floorNumspan}`,`${data.floorNum}`, `${this.state.path}?id=${data.coworkid}&&floor=${data.floorNum}`)}
              {getTemplateBasicItem(curCls, getLabel(23066,'发表时间'), data.discussdatespan)}
            </div>
          );
        },
      }],
    };
    return newTemp;
  }


  render(){
    const { prefixCls, centerStore: { publishStore } } = this.props;
    const { myCommentLoading, myCommentList } = publishStore;

    return myCommentLoading ? renderLoading : (
      <div className={prefixCls}>
        <div className={`cowork-template`}>
          <BackTop
            visibilityHeight='200'
            modal
            target='wm-list-view-page-modal-scrollview'
          >
          <ListViewPage.Normal
            store={myCommentList}
            getTemplate={this.getTemplate}
            onRowClick={(selectedRowKeys) => {
              this.setState({coworkId: selectedRowKeys.coworkid});
              this.props.history.push(`${this.state.path}?id=${selectedRowKeys.coworkid}`);
            }}
          />
          </BackTop>
        </div>
      </div>
    );
  }
}